Metro 的 Fast Refresh 功能

Metro 中重要 debug 功能就是支援 Fast Refresh ，這個功能供開發者即時的回應，讓使用者可以在修改程式碼後，快速地在應用程式中看到修改後的 UI 畫面。

Fast Refresh 原理

Fast Refresh 是如何實現的呢？ Metro 可以把本地的 Javascript 打包轉換發送的 React Native 的應用程式，透過 Hot Module Replacement 的原理去做更新。

Metro 會透過 socket 跟你的應用程式中 Hot Module Replacement Client 連線（這包 Hot Module Replacement Client 就是執行在 React Native 應用程式的 Javascript 的 code。

透過 socket 去監聽程式碼的變化，當你儲存你的程式碼時，Metro 就會整包 Javascript 編譯打包成新的 bundle。

它就會通過 socket 向 Hot Module Replacement Client 發出通知，當應用程式收到通知就會向 Metro 發送 bundle 的請求，收到從 Metro 發過來的更新的 bundle 就可以使用 JavaScript 引擎去更新 bundle。

Fast Refresh 運作機制

• 僅支援限於修改 React function 元件跟 hooks
• 只有 React 元件的模組：當修改這樣的模組，只有這個模組的程式碼會被更新，然後該 React 元件會重新渲染。
• 有其他匯出但不是 React 元件的模組： 當修改這樣的模組，Fast Refresh 會重新運行這個模組，並且引入了這個模組的其他模組也會被重新運行。所以，如果 Home.js 和 User.js 都引入了 Button.js，修改 Button.js 會導致這兩個元件都被更新。
• 被 React 元件之外的模組引入的文件：當修改這樣的模組，將直接重新載入整個應用程式。

實戰

這個情境發生在使用 iOS 模擬器打開應用程式時，模擬器上的錯誤訊息: No bundle URL present.

簡單來說，React Native 的應用程式中沒有 .jsbundle，React Native 無法讀取 bundle 去把應用程式打開，確實經過檢查後 Metro 沒有打開，故 React Native 沒辦法取得 js bundle，所以解決的方法便是 npx react-native start 去打開 Metro，Metro 運作後點模擬器上的 Reload 或用鍵盤 ⌘Ｒ。

這時候模擬器就會重新取得 bundle 模組。

參考資料

https://cloud.tencent.com/developer/article/1645453
https://reactnative.dev/docs/fast-refresh
https://javascript.plainenglish.io/what-is-react-fast-refresh-f3d1e8401333
https://www.zadmei.com/rhxjcpfr.html